//$(beginProcess)

var frameCounter = 0;

var Xsize = 500;
var Ysize = 400;

var Xcenter = Xsize / 2;
var Ycenter = Ysize / 2;

var canvas = document.getElementById('canvasElement');
var ctx = canvas.getContext('2d');

var i = new Array(10);
var gh = new Array(10);

for (var z = 0; z < 10; z++) {
    i[z] = document.getElementById('i' + (z + 1));
    gh[z] = i[z].getContext('2d');
    gh[z].fillStyle = "rgb(200,200,200)";
    gh[z].fillRect(0, 0, Xsize, Ysize);
}

var index = 0;

var img = new Image();
img.src = 'img/ball.png';

var img2 = new Image();
img2.src = 'img/ball2.png';

var ball1 = new ballObject(-240, -10);
var ball2 = new ballObject(-220, 110);

updateFrame();

function saveImage() {
    var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // here is the most important part because if you dont replace you will get a DOM 18 exception.
    window.location.href = image;
}

function makeGIF() {
    var encoder = new GIFEncoder();
    encoder.setRepeat(0); //auto-loop
    encoder.setDelay(25);
    encoder.setSize(Xsize, Ysize);
    console.log(encoder.start());
    for (var index = 0; index < 10; index++) {
        ctx.drawImage(i[index], 0, 0);
        encoder.addFrame(ctx);
    }
    encoder.finish();
    var binary_gif = encoder.stream().getData();
    //var data_url = 'data:image/gif;base64,'+encode64(binary_gif);
    //var data_url = 'data:image/gif;base64,'+btoa(binary_gif); //b64.encode(binary_gif, complete);
    var data_url = 'data:image/octet-stream;base64,' + btoa(binary_gif);

    window.location.href = data_url;
}

function drawVectors(ball, handle) {

    //Draw current ball position
    handle.beginPath();
    handle.arc(ball.actualX + Xcenter + 16, ball.actualY + Ycenter + 16, 3, 0, 2 * Math.PI, false);
    handle.fillStyle = '#ff9090';
    handle.fill();
    handle.lineWidth = 1;
    handle.strokeStyle = 'black';
    handle.stroke();


    //draw target X,Y
    handle.beginPath();
    handle.arc(ball.targetX + Xcenter + 16, ball.targetY + Ycenter + 16, 3, 0, 2 * Math.PI, false);
    handle.fillStyle = '#ffffff';
    handle.fill();
    handle.lineWidth = 1;
    handle.strokeStyle = 'black';
    handle.stroke();


    //Draw velocity
    handle.beginPath();
    handle.strokeStyle = 'red';
    handle.lineWidth = 3;
    handle.moveTo(ball.actualX + Xcenter + 16, ball.actualY + Ycenter + 16);
    handle.lineTo(ball.actualX + Xcenter + 16 + (ball.velocityX * 20), ball.actualY + Ycenter + 16 + (ball.velocityY * 20));
    handle.stroke();


    //Draw velocity step
    handle.beginPath();
    handle.strokeStyle = 'cyan';
    handle.lineWidth = 3;
    handle.moveTo(ball.actualX + Xcenter + 16, ball.actualY + Ycenter + 16);
    handle.lineTo(ball.actualX + Xcenter + 16 + (ball.velocityStepX * 1000), ball.actualY + Ycenter + 16 + (ball.velocityStepY * 1000));
    handle.stroke();
}


function updateFrame() {
    ball1.updateBall();
    ball2.updateBall();

    gh[index].globalAlpha = (1+Math.sin(ball1.angle)/1.2)/2;
    gh[index].drawImage(img, ball1.actualX + 200, ball1.actualY + 130);
    gh[index].drawImage(img2, ball2.actualX + 200, ball2.actualY + 130);

//    drawVectors(ball1, gh[index]);
//    drawVectors(ball2, gh[index]);

    ctx.drawImage(i[index], 0, 0);

//    drawVectors(ball1);
//    drawVectors(ball2);

    if (++index == 10) index = 0;

    setTimeout(updateFrame, 1);
}


